﻿@page "/scheduler/recurrence-events"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo showcases the Scheduler with recurring meetings handled by a top-level manager on a regular pattern.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this demo, the recurrence events are defined with different repeat patterns. It can be defined through
        <code>RecurrenceRule</code> field. The recurring events are differentiated from other events by a repeat marker added to the right-bottom of it. These events can repeat on daily, weekly, monthly or yearly basis.
    </p>
    <p> Here, the daily patterned events are depicted in blue color, weekly events are differentiated with green color, monthly events are depicted in orange color and the yearly event is depicted in the all-day section with another green shade for reference.</p>
    <p>Scheduler requires only the <code>StartTime</code> and <code>EndTime</code> fields as mandatory to be mapped from the dataSource. The Scheduler events can be categorized into 3 types based on its time range and all-day type. </p>
    <table style=" width:100%">
        <tr>
            <th style=" width:100px"> <strong>Event</strong> </th>
            <th><strong>Description</strong> </th>
        </tr>
        <tr>
            <td style=" padding:4px 0;">Normal events</td>
            <td> The events that has its start and end time duration on the same date.</td>
        </tr>
        <tr>
            <td style=" padding:4px 0;">Spanned events</td>
            <td>The events on which its start and end time spans over multiple days and usually displays together with all-day events.</td>
        </tr>
        <tr>
            <td style=" padding:4px 0;">All-day events</td>
            <td>The events that are defined as all-day in its event object by setting <code>IsAllDay</code> to true. </td>
        </tr>
    </table>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView MaxEventsPerRow="2" Option="View.Month"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource" AllowEditFollowingEvents="@EditUpcoming"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
        <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
            <tbody>
                <tr style="height: 50%">
                    <td style="width: 100%">
                        <SfCheckBox @bind-Checked="@EditUpcoming" Label="Enable Following Events"></SfCheckBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 9);
    public bool EditUpcoming = false;
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetRecurrenceData();
}
